<template>
  <el-card>
    <h1 class="me-author-name text">Ease</h1>
    <div class="me-author-description">
      <span class="text"
        ><i class="el-icon-location-outline"></i> &nbsp;江西&赣州</span
      >
      <span class="text"
        ><i class="iconfont icon-a-gongzuotaigongzuozhuo-03"></i>
        &nbsp;持续写Bug中</span
      >
    </div>
    <div class="me-author-tool">
      <i
        @click="showTool(qq)"
        :title="qq.title"
        class="iconfont icon-QQ text"
      ></i>
      <i
        @click="showTool(github)"
        :title="github.title"
        class="iconfont icon-weixin text"
      ></i>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'CardMe',
  data() {
    return {
      qq: { title: 'QQ', message: '1961741003' },
      github: {
        title: 'github',
        message: 'Sgr-anyi',
      },
    }
  },
  methods: {
    showTool(tool) {
      this.$message({
        duration: 0,
        showClose: true,
        dangerouslyUseHTMLString: true,
        message: '<strong>' + tool.message + '</strong>',
      })
    },
  },
}
</script>

<style scoped>
.me-author-name {
  text-align: center;
  font-size: 30px;
  border-bottom: 1px solid #5fb878;
}

.me-author-description {
  padding: 8px 0;
}
.el-icon-location-outline {
  margin-left: 20px;
  flex: 1;
}

.icon-a-gongzuotaigongzuozhuo-03 {
  margin-left: 30px;
  padding-left: 16px;
}

.me-author-tool {
  text-align: center;
  padding-top: 10px;
}

.me-author-tool i {
  text-align: center;
  cursor: pointer;
  padding: 4px 10px;
  font-size: 30px;
}
.icon-QQ {
  margin-right: 120px;
}
.text {
  background-image: -webkit-linear-gradient(
    left,
    blue,
    #66ffff 10%,
    #cc00ff 20%,
    #cc00cc 30%,
    #ccccff 40%,
    #00ffff 50%,
    #ccccff 60%,
    #cc00cc 70%,
    #cc00ff 80%,
    #66ffff 90%,
    blue 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
}
@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>
